<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>
<body>
    <div class="nav">网络五子棋对战游戏</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        var ws_url = "ws://" + location.host + "/hall";
        var ws_hdl = null;
        var button = document.getElementById("match-button");
        var button_flag = "stop";

        function get_user_info()
        {   
            window.onbeforeunload = function() {
                //游戏大厅页面关闭/跳转时的回调函数 断开websocket连接 
                ws_hdl.close();
            }

            $.ajax({
                url: "/info",
                type: "get",
                success: function(ret) {
                    var user_info = "<p>" + "玩家: " + ret.username + "积分: " + ret.score + "<br/>"
                                    + "比赛场次: " + ret.total_count + "获胜场次: " + ret.win_count + "</p>";
                    var screen = document.getElementById("screen");
                    screen.innerHTML = user_info;

                    ws_hdl = new WebSocket(ws_url);
                    ws_hdl.onopen = ws_onopen;
                    ws_hdl.onclose = ws_onclose;
                    ws_hdl.onerror = ws_onerror;
                    ws_hdl.onmessage = ws_onmessage;   
                },
                error: function(xhr) {
                    alert(JSON.stringify(xhr));
                    window.location.assign("/login.html");//http静态资源请求
                }
            });

            button.onclick = function() {
                if (button_flag == "stop")
                {
                    var req = {
                        optype: "match_start"
                    };
                    ws_hdl.send(JSON.stringify(req));
                }
                else
                {
                    var req = {
                        optype: "match_stop"
                    };
                    ws_hdl.send(JSON.stringify(req));
                }
            }
        }
        get_user_info();
        
        function ws_onopen() { console.log("websocket onopen"); }
        function ws_onclose() { console.log("websocket onclose"); }
        function ws_onerror() { console.log("websocket onerror"); }
        function ws_onmessage(evt)
        {
            var res = JSON.parse(evt.data);
            if (res.result == false)
            {
                alert(res.reason);
                location.replace("/login.html");//跳转登录页面 websocket连接断开 服务器将用户从大厅删除 并为session添加定时删除
                return;
            }
            if (res.optype == "enter_hall")
            {
                alert(res.reason);
            }
            else if (res.optype == "match_start")
            {
                console.log(res.reason);
                button_flag = "start";
                button.innerHTML = "匹配中...点击停止匹配";
            }
            else if (res.optype == "match_stop")
            {
                console.log(res.reason);
                button_flag = "stop";
                button.innerHTML = "开始匹配";
            }
            else if (res.optype == "match_success")
            {
                alert("匹配成功 进入游戏房间");
                location.replace("/game_room.html");//http静态资源请求
            }
            else//未知响应类型
            {
                location.replace("/login.html");
            }
        }

    </script>
</body>
</html>